<!doctype html>
<html lang="en">
<head>

<title>Fancy Slideshow Navigation (example)</title>

<style type="text/css">

#slideshow {
    width: 900px;
    height: 500px;
    overflow: hidden;
    position: relative;
    margin: 20px auto;
}

#slideshow-reel {
    width: 5400px;
    height: 450px;
    position: absolute;
    top: 0;
    left: 0;
}

#slideshow-reel .slide {
    width: 900px;
    height: 450px;
    float: left;
    background-color: gray;
}

#slideshow-reel .slide:nth-child(2n+1) {
    background-color: #333;
}

#slideshow-reel h1 {
    margin: 25px 60px;
    color: #FFF;
    font-size: 3em;
    text-shadow: 0 -1px 1px #333;
}

/* arrow navigation */

.slideshow-arrow {
    display: block;
    position: absolute;
    top: 190px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 28px 21px;
    border-color: transparent;
    outline: none;
}

.slideshow-arrow:hover {
    opacity: .5;
    filter: alpha(opacity=50);
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
}

#slideshow-left {
    left: 0;
    border-right-color: #fff;
}

#slideshow-right {
    right: 0;
    border-left-color: #fff;
}

/* bottom navigation */

#slideshow-nav {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 900px;
}

#slideshow-nav .nav-item {
    float: left;
    width: 150px;
    padding: 11px 0;
    outline: none;
}

#slideshow-nav .nav-item-line {
    float: left;
    width: 68px;
    height: 1px;
    line-height: 1px;
    margin: 3px 0;
    background-color: #bbb;
}

#slideshow-nav .nav-item-line-hidden {
    background-color: transparent;
}

#slideshow-nav .nav-item-dot {
    float: left;
    width: 8px;
    height: 8px;
    margin: 0 3px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    background-color: #ed1d27;
}

/* active nav dot */

#active-nav-item {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 30px;
    height: 30px;
    margin-left: 60px;
    background-color: #8e8d8b;
    background-color: rgba(28, 27, 23, .5);
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    border-radius: 15px;
}

#active-nav-item .active-nav-item-inner {
    display: inline-block;
    width: 8px;
    height: 8px;
    margin: 11px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    background-color: #000;
}



</style>

<!--[if lt IE 7]>
<style type="text/css">
.slideshow-arrow,
#slideshow-nav .nav-item-line,
#slideshow-nav .nav-item-dot {
    overflow: hidden;
}

.slideshow-arrow,
.slideshow-arrow:hover {
    border-top-color: pink;
    border-bottom-color: pink;
    filter: chroma(color=pink);
}

#slideshow-left {
    border-left-color: pink;
}

#slideshow-right {
    border-right-color: pink;
}
</style>
<![endif]-->

</head>

<body>

<div id="slideshow">
    <div id="slideshow-reel">
        <div class="slide">
            <h1>Slide 1</h1>
        </div>
        
        <div class="slide">
            <h1>Slide 2</h1>
        </div>
        
        <div class="slide">
            <h1>Slide 3</h1>
        </div>
        
        <div class="slide">
            <h1>Slide 4</h1>
        </div>
        
        <div class="slide">
            <h1>Slide 5</h1>
        </div>
        
        <div class="slide">
            <h1>Slide 6</h1>
        </div>
    </div>
    
    <a href="#" id="slideshow-left" class="slideshow-arrow"></a>
    <a href="#" id="slideshow-right" class="slideshow-arrow"></a>
    
    <div id="slideshow-nav">
        <a href="#" class="nav-item">
            <span class="nav-item-line nav-item-line-hidden"></span>
            <span class="nav-item-dot"></span>
            <span class="nav-item-line"></span>
        </a>
        
        <a href="#" class="nav-item">
            <span class="nav-item-line"></span>
            <span class="nav-item-dot"></span>
            <span class="nav-item-line"></span>
        </a>
        
        <a href="#" class="nav-item">
            <span class="nav-item-line"></span>
            <span class="nav-item-dot"></span>
            <span class="nav-item-line"></span>
        </a>
        
        <a href="#" class="nav-item">
            <span class="nav-item-line"></span>
            <span class="nav-item-dot"></span>
            <span class="nav-item-line"></span>
        </a>
        
        <a href="#" class="nav-item">
            <span class="nav-item-line"></span>
            <span class="nav-item-dot"></span>
            <span class="nav-item-line"></span>
        </a>
        
        <a href="#" class="nav-item">
            <span class="nav-item-line"></span>
            <span class="nav-item-dot"></span>
            <span class="nav-item-line nav-item-line-hidden"></span>
        </a>
        
        <span id="active-nav-item">
            <span class="active-nav-item-inner"></span>
        </span>
    </div>
</div>


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js
"></script>
<script type="text/javascript">

$(function() {
    function changeSlide( newSlide ) {
        // cancel any timeout
        clearTimeout( slideTimeout );
        
        // change the currSlide value
        currSlide = newSlide;
        
        // make sure the currSlide value is not too low or high
        if ( currSlide > maxSlide ) currSlide = 0;
        else if ( currSlide < 0 ) currSlide = maxSlide;
        
        // animate the slide reel
        $slideReel.animate({
            left : currSlide * -900
        }, 400, 'swing', function() {
            // hide / show the arrows depending on which frame it's on
            if ( currSlide == 0 ) $slideLeftNav.hide();
            else $slideLeftNav.show();
            
            if ( currSlide == maxSlide ) $slideRightNav.hide();
            else $slideRightNav.show();
            
            // set new timeout if active
            if ( activeSlideshow ) slideTimeout = setTimeout(nextSlide, 1200);
        });
        
        // animate the navigation indicator
        $activeNavItem.animate({
            left : currSlide * 150
        }, 400, 'swing');
    }
    
    function nextSlide() {
        changeSlide( currSlide + 1 );
    }
    
    // define some variables / DOM references
    var activeSlideshow = true,
    currSlide = 0,
    slideTimeout,
    $slideshow = $('#slideshow'),
    $slideReel = $slideshow.find('#slideshow-reel'),
    maxSlide = $slideReel.children().length - 1,
    $slideLeftNav = $slideshow.find('#slideshow-left'),
    $slideRightNav = $slideshow.find('#slideshow-right'),
    $activeNavItem = $slideshow.find('#active-nav-item');
    
    // set navigation click events
    
    // left arrow
    $slideLeftNav.click(function(ev) {
        ev.preventDefault();
        
        activeSlideshow = false;
        
        changeSlide( currSlide - 1 );
    });
    
    // right arrow
    $slideRightNav.click(function(ev) {
        ev.preventDefault();
        
        activeSlideshow = false;
        
        changeSlide( currSlide + 1 );
    });
    
    // main navigation
    $slideshow.find('#slideshow-nav a.nav-item').click(function(ev) {
        ev.preventDefault();
        
        activeSlideshow = false;
        
        changeSlide( $(this).index() );
    });
    
    // start the animation
    slideTimeout = setTimeout(nextSlide, 1200);
});

</script>

</body>
</html>